<template>
  <!-- <el-divider></el-divider> -->
  <el-row>
    <el-col :span="24">
      <span class="mediatitle">详情展示</span>
    </el-col>
    <el-col :span="24">
      <div class="body">
        <div class="title">{{mediaInfo.name}}</div>
        <div class="ctime">
          {{ctime(mediaInfo.ctime)}}
          来源：{{mediaInfo.copyfrom}}
        </div>
        <div class="cname">
          分类：{{mediaInfo.cat}}
        </div>
        <div class="ck-content">
          <span v-html="mediaInfo.content"></span>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import {computed} from 'vue'
  export default {
    name: "ArticleDetail",
    props: {
      mediaInfo: {
        type: Object,
        required: true
      }
    },
    setup() {
      const ctime = computed(() => {
        return (ctime) => {
          let timeArr = ctime.split(' ')
          return timeArr[0]
        }
      })

      return {
        ctime
      }
    }
  }
</script>
<style scoped>
  @import '~@/assets/css/ckeditor5.css';
  .title{
    font-size: 24px;
    color:#333;
    font-weight: bold;
  }
  .ctime,.cname{
    margin-top: 10px;
    font-size: 10px;
    color: #999;
  }
  .cname{margin-bottom: 10px;}
</style>
